// COLORS
// -----------------------------------------------------------------------------
@use 'sass:map';
@use 'sass:meta';

// stylelint-disable color-no-hex, no-indistinguishable-colors, function-max-empty-lines, value-list-max-empty-lines
$color-palette-data: (
  background: (
    light: #FFFFFF,
    dark: #181818,
  ),
  accent: (
    base: rgb(0, 90, 156),
    dark: rgb(82, 196, 255) 
  ),
  accent-2: (
    base: #FFCA04,
    pale: #ffe07d,
  ),
  green: (
    base: #4caf50,
  ),
  alerts: (
    warning-bg: rgb(255, 244, 229),
    warning-text: rgb(102, 60, 0),
    warning-bg--dark:  rgb(22, 11, 11),
    warning-text--dark: rgb(255, 226, 183)
  ),
  gray: (
    darker: #222222,
    dark: #555555,
    base: #5a5a5a, /* Darkened for better contrast */
    baseDark: #a7a7a7,
    light: #DDDDDD,
    lighter: #EEEEEE,
  )
);


/// Returns the color value for a given color name and group.
///
/// @param {String} $hue - The color's hue.
/// @param {String} $value - The darkness/lightness of the color. Defaults to base.
/// appear. Applies a multiply filter to ensure appropriate contrast.
/// @return {Color} The color value.

@function color($hue, $value: base) {
  $fetched-color: map.get(map.get($color-palette-data, $hue), $value);

  @if map.has-key($color-palette-data, $fetched-color) {
    $fetched-color: map.get(map.get($color-palette-data, $fetched-color), $value);
  }

  @if meta.type-of($fetched-color) == color {
    @return $fetched-color;
  } @else {
    @error 'Color `#{$hue} - #{$value}` not found. Available colors: #{available-names($color-palette-data)}';
  }
}
